/**
 * @Creator: eyes
 * @Date: 2020/03/12
 * 「用户特征」模块入口
 */
import React from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';

import {Tabs} from 'antd';
import useData from './data';
import FilterForm from './FilterForm';
import UserList from './UserList';
import OperatorAndNetWork from './OperatorAndNetWork';
import TerminalAndTypeDistribution from './TerminalAndTypeDistribution';
import Area from './Area';
import './index.styl';

const {TabPane} = Tabs;
function UserFeatures(props) {
    const [state, dispatch, StoreContext, onUserFeatureSearch] = useData(props);

    return (
        <StoreContext.Provider value={{
            state,
            dispatch,
            onUserFeatureSearch,
        }}
        >
            <div className="user-feature-container">
                <div className="user-feature-header">
                    <span className="user-feature-title">用户特征</span>
                    <span className="user-feature-description">数据更新时间为T+1</span>
                    <hr className="line" />
                </div>
                <FilterForm />
                <div className="user-feature-tab-container">
                    <Tabs defaultActiveKey="area">
                        <TabPane tab="地域分布" key="area">
                            <Area />
                        </TabPane>
                        <TabPane tab="终端及机型分布" key="os">
                            <TerminalAndTypeDistribution />
                        </TabPane>
                        <TabPane tab="运营商及网络环境分布" key="network">
                            <OperatorAndNetWork />
                        </TabPane>
                    </Tabs>
                </div>
                <UserList />
            </div>
        </StoreContext.Provider>
    );
}

export default connect(s => s)(withRouter(UserFeatures));
